<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>设备运行管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  	<link media="all" rel="stylesheet" href="${pageContext.request.contextPath }/assets/highcharts7.0.1/code/css/highcharts.css">
  	<link media="all" rel="stylesheet" href="${pageContext.request.contextPath }/assets/highcharts7.0.1/code/css/themes/dark-unica.css">
	<script src="${pageContext.request.contextPath }/assets/js/jquery.min.js" charset="utf-8"></script>
	<script src="${pageContext.request.contextPath }/assets/highcharts7.0.1/code/highcharts.js"></script>
	<%-- <script src="${pageContext.request.contextPath }/assets/highcharts7.0.1/code/es-modules/themes/dark-unica.js"></script> --%>
	<script type="text/javascript">
		$(function () {
			var options1 = {
				chart: {
					renderTo:'container1',
			        type: 'column'
			    },
			    title: {
			        text: '离心机运行情况',
			        useHTML: true,
		            style: {
		                color: 'white',      //字体颜色
		                "fontSize": "20px",  //字体大小
		                fontWeight: 'bold'
		            }
			    },
			    subtitle: {
			        text: '数据截止' + getNowDate(),
			        style: {
		                color: 'white',      //字体颜色
		                "fontSize": "15px"
		            }
			    },
			    xAxis: {
			        type: 'category',
			        crosshair: true
			    },
			    yAxis: {
			        title: {
			            text: '单位(台)'
			        }
			    },
			    /* legend: {
			        enabled: false
			    }, */
			    /* colors: ['#218868', 'gray', '#EE9A00', '#FF4040'], */
				plotOptions: {
				    column: {
				    	borderWidth: 0
				    },
			        series: {
			            borderWidth: 0,
			            dataLabels: {
			                enabled: true,
			                format: '{point.y:.0f}'
			            }
			        } ,
			        column: {
		            	colorByPoint: true
		            }
			    },
			    tooltip: {
			    	headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
   			        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
				},
					series: []
			}
			var oChart1 = null;
			oChart1 = new Highcharts.Chart(options1);
			Load_SeriesData1();

			function Load_SeriesData1(){
				//oChart.showLoading("正在加载...."); 
                  	$.ajax({  
						url : '${pageContext.request.contextPath }/operateMC/queryAllDeviceStatus.do',
                   		type : 'POST',
                      	dataType : 'json',
                      	contentType: "application/x-www-form-urlencoded; charset=utf-8",
                      	success : function(Data){
						//Data = JSON.stringify(data);
                          	console.log(Data);
                          	var DataSeries1 = {
                           	name: Data.name,
                              	colorByPoint: Data.colorByPoint,
                              	data: Data.data,
                              	color: Data.color
                          	};
                          	oChart1.addSeries(DataSeries1);
                       	//oChart.hideLoading("正在加载....");
                   	}
				});
			}
			
			/* 柱状图2 */
           	var options2 = {
   				chart: {
					renderTo:'container2',
   			        type: 'column'
   			    },
   			    title: {
   			        text: 'AGV拉料、固化情况',
			        useHTML: true,
		            style: {
		                color: 'white',      //字体颜色
		                "fontSize": "20px",  //字体大小
		                fontWeight: 'bold'
		            }
			    },
			    subtitle: {
			        text: '数据截止' + getNowDate(),
			        style: {
		                color: 'white',      //字体颜色
		                "fontSize": "15px"
		            }
			    },
   			    xAxis: {
   			        type: 'category'
   			    },
   			    yAxis: {
   			        title: {
   			            text: '单位(台)'
   			        }
   			    },
   			    legend: {
   			        enabled: false
   			    },
   			    plotOptions: {
   			        series: {
   			            borderWidth: 0,
   			            dataLabels: {
   			                enabled: true,
   			                format: '{point.y:.1f}%'
   			            }
   			        }
   			    },
   			    tooltip: {
   			        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
   			        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
   			    },
            	series: []
			}
            var oChart2 = null;
            oChart2 = new Highcharts.Chart(options2);
            Load_SeriesData2();

            function Load_SeriesData2(){
                //oChart.showLoading("正在加载...."); 
                $.ajax({  
                    url : '${pageContext.request.contextPath }/json/highchart2.json',
                    type : 'POST',
                    dataType : 'json',
                    contentType: "application/x-www-form-urlencoded; charset=utf-8",
                    success : function(Data){
			   			//Data = JSON.stringify(data);
                        console.log(Data);
                        var DataSeries2 = {
                            name: Data.name,
                            colorByPoint: Data.colorByPoint,
                            data: Data.data
                        };
                        oChart2.addSeries(DataSeries2);
                        //oChart.hideLoading("正在加载....");
                    }
                });
            }
			
			/* 柱状图3 */
            var options3 = {
   				chart: {
   					renderTo:'container3',
   			        type: 'column'
   			    },
   			    title: {
   			        text: '组件评价',
			        useHTML: true,
		            style: {
		                color: 'white',      //字体颜色
		                "fontSize": "20px",  //字体大小
		                fontWeight: 'bold'
		            }
			    },
			    subtitle: {
			        text: '数据截止' + getNowDate(),
			        style: {
		                color: 'white',      //字体颜色
		                "fontSize": "15px"
		            }
			    },
   			    xAxis: {
   			        type: 'category'
   			    },
   			    yAxis: {
   			        title: {
   			            text: '单位(台)'
   			        }
   			    },
   			    legend: {
   			        enabled: false
   			    },
   			    /* colors: ['#218868', 'gray', '#EE9A00', '#FF4040'], */
   				plotOptions: {
   			        series: {
   			            borderWidth: 0,
   			            dataLabels: {
   			                enabled: true,
   			                format: '{point.y:.1f}'
   			            }
   			        } ,
   			        column: {
   		            	colorByPoint: true
   		            }
   			    },
   			    tooltip: {
   			        headerFormat: '<span style="font-size:11px">{series.data.name}</span><br>',
   			        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
   				},
   				series: []
			}
           	var oChart3 = null;
            oChart3 = new Highcharts.Chart(options3);
            Load_SeriesData3();

			function Load_SeriesData3(){
   				//oChart.showLoading("正在加载...."); 
               	$.ajax({  
					url : '${pageContext.request.contextPath }/operateMC/queryEvaluateByDeviceNumber.do',
                	type : 'POST',
                	data: {deviceNumber : '001'},
                   	dataType : 'json',
                   	contentType: "application/x-www-form-urlencoded; charset=utf-8",
                   	success : function(Data){
						//Data = JSON.stringify(data);
                       	console.log(Data);
                       	var DataSeries3 = {
                        	name: Data.name,
                           	colorByPoint: Data.colorByPoint,
                           	data: Data.data
                       	};
                       	oChart3.addSeries(DataSeries3);
                      	//oChart.hideLoading("正在加载....");
                  	}
  				});
			}
				
			/* 柱状图4 */
			var options4 = {
				chart: {
					renderTo:'container4',
			        type: 'column'
			    },
			    title: {
			        text: '组件评价',
			        useHTML: true,
		            style: {
		                color: 'white',      //字体颜色
		                "fontSize": "20px",  //字体大小
		                fontWeight: 'bold'
		            }
			    },
			    subtitle: {
			        text: '数据截止' + getNowDate(),
			        style: {
		                color: 'white',      //字体颜色
		                "fontSize": "15px"
		            }
			    },
			    xAxis: {
			        type: 'category'
			    },
			    yAxis: {
			        title: {
			            text: '单位(台)'
			        }
			    },
			    legend: {
			        enabled: false
			    },
			    /* colors: ['#218868', 'gray', '#EE9A00', '#FF4040'], */
				plotOptions: {
			        series: {
			            borderWidth: 0,
			            dataLabels: {
			                enabled: true,
			                format: '{point.y:.1f}'
			            }
			        } ,
			        column: {
		            	colorByPoint: true
		            }
			    },
			    tooltip: {
			        headerFormat: '<span style="font-size:11px">{series.data.name}</span><br>',
			        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
				},
					series: []
              	}
              	var oChart4 = null;
              	oChart4 = new Highcharts.Chart(options4);
              	Load_SeriesData4();

				function Load_SeriesData4(){
				//oChart.showLoading("正在加载...."); 
                  	$.ajax({  
						url : '${pageContext.request.contextPath }/operateMC/queryEvaluateByDeviceNumber.do',
                   		type : 'POST',
                   		data: {deviceNumber : '002'},
                      	dataType : 'json',
                      	contentType: "application/x-www-form-urlencoded; charset=utf-8",
                      	success : function(Data){
						//Data = JSON.stringify(data);
                          	console.log(Data);
                          	var DataSeries4 = {
                           		name: Data.name,
                              	colorByPoint: Data.colorByPoint,
                              	data: Data.data,
                              	color: Data.color
                          	};
                          	oChart4.addSeries(DataSeries4);
                       	//oChart.hideLoading("正在加载....");
                   	}
				});
			}
				
			/* 柱状图5 */
			var options5 = {
				chart: {
					renderTo:'container5',
			        type: 'column'
			    },
			    title: {
			        text: '组件评价',
			        useHTML: true,
		            style: {
		                color: 'white',      //字体颜色
		                "fontSize": "20px",  //字体大小
		                fontWeight: 'bold'
		            }
			    },
			    subtitle: {
			        text: '数据截止' + getNowDate(),
			        style: {
		                color: 'white',      //字体颜色
		                "fontSize": "15px"
		            }
			    },
			    xAxis: {
			        type: 'category'
			    },
			    yAxis: {
			        title: {
			            text: '单位(台)'
			        }
			    },
			    legend: {
			        enabled: false
			    },
			    /* colors: ['#218868', 'gray', '#EE9A00', '#FF4040'], */
				plotOptions: {
			        series: {
			            borderWidth: 0,
			            dataLabels: {
			                enabled: true,
			                format: '{point.y:.1f}'
			            }
			        } ,
			        column: {
		            	colorByPoint: true
		            }
			    },
			    tooltip: {
			        headerFormat: '<span style="font-size:11px">{series.data.name}</span><br>',
			        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
				},
					series: []
              	}
              	var oChart5 = null;
              	oChart5 = new Highcharts.Chart(options5);
              	Load_SeriesData5();

				function Load_SeriesData5(){
					//oChart.showLoading("正在加载...."); 
                  	$.ajax({  
						url : '${pageContext.request.contextPath }/operateMC/queryEvaluateByDeviceNumber.do',
                   		type : 'POST',
                   		data: {deviceNumber : '003'},
                      	dataType : 'json',
                      	contentType: "application/x-www-form-urlencoded; charset=utf-8",
                      	success : function(Data){
						//Data = JSON.stringify(data);
                          	console.log(Data);
                          	var DataSeries5 = {
                           		name: Data.name,
                              	colorByPoint: Data.colorByPoint,
                              	data: Data.data,
                              	color: Data.color
                          	};
                          	oChart5.addSeries(DataSeries5);
                       	//oChart.hideLoading("正在加载....");
                   	}
				});
			}
				
			/* 柱状图6 */
			var options6 = {
				chart: {
					renderTo:'container6',
			        type: 'column'
			    },
			    title: {
			        text: '组件评价',
			        useHTML: true,
		            style: {
		                color: 'white',      //字体颜色
		                "fontSize": "20px",  //字体大小
		                fontWeight: 'bold'
		            }
			    },
			    subtitle: {
			        text: '数据截止' + getNowDate(),
			        style: {
		                color: 'white',      //字体颜色
		                "fontSize": "15px"
		            }
			    },
			    xAxis: {
			        type: 'category'
			    },
			    yAxis: {
			        title: {
			            text: '单位(台)'
			        }
			    },
			    legend: {
			        enabled: false
			    },
			    /* colors: ['#218868', 'gray', '#EE9A00', '#FF4040'], */
				plotOptions: {
			        series: {
			            borderWidth: 0,
			            dataLabels: {
			                enabled: true,
			                format: '{point.y:.1f}'
			            }
			        } ,
			        column: {
		            	colorByPoint: true
		            }
			    },
			    tooltip: {
			        headerFormat: '<span style="font-size:11px">{series.data.name}</span><br>',
			        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
				},
					series: []
              	}
              	var oChart6 = null;
              	oChart6 = new Highcharts.Chart(options6);
              	Load_SeriesData6();

				function Load_SeriesData6(){
					//oChart.showLoading("正在加载...."); 
                  	$.ajax({  
						url : '${pageContext.request.contextPath }/operateMC/queryEvaluateByDeviceNumber.do',
                   		type : 'POST',
                   		data: {deviceNumber : '004'},
                      	dataType : 'json',
                      	contentType: "application/x-www-form-urlencoded; charset=utf-8",
                      	success : function(Data){
						//Data = JSON.stringify(data);
                          	console.log(Data);
                          	var DataSeries6 = {
                           		name: Data.name,
                              	colorByPoint: Data.colorByPoint,
                              	data: Data.data,
                              	color: Data.color
                          	};
                          	oChart6.addSeries(DataSeries6);
                       	//oChart.hideLoading("正在加载....");
                   	}
				});
			}
				
			/* 柱状图7 */
			var options7 = {
				chart: {
					renderTo:'container7',
			        type: 'column'
			    },
			    title: {
			        text: '组件评价',
			        useHTML: true,
		            style: {
		                color: 'white',      //字体颜色
		                "fontSize": "20px",  //字体大小
		                fontWeight: 'bold'
		            }
			    },
			    subtitle: {
			        text: '数据截止' + getNowDate(),
			        style: {
		                color: 'white',      //字体颜色
		                "fontSize": "15px"
		            }
			    },
			    xAxis: {
			        type: 'category'
			    },
			    yAxis: {
			        title: {
			            text: '单位(台)'
			        }
			    },
			    legend: {
			        enabled: false
			    },
			    /* colors: ['#218868', 'gray', '#EE9A00', '#FF4040'], */
				plotOptions: {
			        series: {
			            borderWidth: 0,
			            dataLabels: {
			                enabled: true,
			                format: '{point.y:.1f}'
			            }
			        } ,
			        column: {
		            	colorByPoint: true
		            }
			    },
			    tooltip: {
			        headerFormat: '<span style="font-size:11px">{series.data.name}</span><br>',
			        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
				},
					series: []
              	}
              	var oChart7 = null;
              	oChart7 = new Highcharts.Chart(options7);
              	Load_SeriesData7();

				function Load_SeriesData7(){
					//oChart.showLoading("正在加载...."); 
                  	$.ajax({  
						url : '${pageContext.request.contextPath }/operateMC/queryEvaluateByDeviceNumber.do',
                   		type : 'POST',
                   		data: {deviceNumber : '005'},
                      	dataType : 'json',
                      	contentType: "application/x-www-form-urlencoded; charset=utf-8",
                      	success : function(Data){
							//Data = JSON.stringify(data);
                          	console.log(Data);
                          	var DataSeries7 = {
                           		name: Data.name,
                              	colorByPoint: Data.colorByPoint,
                              	data: Data.data,
                              	color: Data.color
                          	};
                          	oChart7.addSeries(DataSeries7);
                       		//oChart.hideLoading("正在加载....");
                	}
				});
			}
			
			/* 柱状图8 */
			var options8 = {
				chart: {
					renderTo:'container8',
			        type: 'column'
			    },
			    title: {
			        text: '组件评价',
			        useHTML: true,
		            style: {
		                color: 'white',      //字体颜色
		                "fontSize": "20px",  //字体大小
		                fontWeight: 'bold'
		            }
			    },
			    subtitle: {
			        text: '数据截止' + getNowDate(),
			        style: {
		                color: 'white',      //字体颜色
		                "fontSize": "15px"
		            }
			    },
			    xAxis: {
			        type: 'category'
			    },
			    yAxis: {
			        title: {
			            text: '单位(台)'
			        }
			    },
			    legend: {
			        enabled: false
			    },
			    /* colors: ['#218868', 'gray', '#EE9A00', '#FF4040'], */
				plotOptions: {
			        series: {
			            borderWidth: 0,
			            dataLabels: {
			                enabled: true,
			                format: '{point.y:.1f}'
			            }
			        } ,
			        column: {
		            	colorByPoint: true
		            }
			    },
			    tooltip: {
			        headerFormat: '<span style="font-size:11px">{series.data.name}</span><br>',
			        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
				},
					series: []
              	}
              	var oChart8 = null;
              	oChart8 = new Highcharts.Chart(options8);
              	Load_SeriesData8();

				function Load_SeriesData8(){
					//oChart.showLoading("正在加载...."); 
                  	$.ajax({  
						url : '${pageContext.request.contextPath }/operateMC/queryEvaluateByDeviceNumber.do',
                   		type : 'POST',
                   		data: {deviceNumber : '006'},
                      	dataType : 'json',
                      	contentType: "application/x-www-form-urlencoded; charset=utf-8",
                      	success : function(Data){
							//Data = JSON.stringify(data);
                          	console.log(Data);
                          	var DataSeries8 = {
                           		name: Data.name,
                              	colorByPoint: Data.colorByPoint,
                              	data: Data.data,
                              	color: Data.color
                          	};
                          	oChart8.addSeries(DataSeries8);
                       	//oChart.hideLoading("正在加载....");
                   	}
				});
			}
				
			function getNowDate() {
				var date = new Date();
				var sign1 = "-";
				var sign2 = ":";
				var year = date.getFullYear() // 年
				var month = date.getMonth() + 1; // 月
				var day  = date.getDate(); // 日
				var hour = date.getHours(); // 时
				var minutes = date.getMinutes(); // 分
				var seconds = date.getSeconds() //秒
				var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
				var week = weekArr[date.getDay()];
				// 给一位数数据前面加 “0”
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (day >= 0 && day <= 9) {
					day = "0" + day;
				}
				if (hour >= 0 && hour <= 9) {
					hour = "0" + hour;
				}
				if (minutes >= 0 && minutes <= 9) {
					minutes = "0" + minutes;
				}
				if (seconds >= 0 && seconds <= 9) {
					seconds = "0" + seconds;
				}
				var currentdate = year + sign1 + month + sign1 + day + " " + hour + sign2 + minutes + sign2 + seconds + " " + week;
					return currentdate;
				}
				console.log(getNowDate());
		});
	</script>
</head>
<body>
	<div>
		<div id="container1" style="height: 300px; width: 50%; min-width: 310px; max-width: 800px; border: 1px solid white; float: left"></div>
		<div id="container2" style="height: 300px; width: 50%; min-width: 310px; max-width: 800px; border: 1px solid white; float: left"></div>
		<div>
			<div id="container3" style="height: 300px; width: 33%; min-width: 200px; max-width: 1800px; border: 1px solid white; float: left"></div>
			<div id="container4" style="height: 300px; width: 33%; min-width: 200px; max-width: 1800px; border: 1px solid white; float: left"></div>
			<div id="container5" style="height: 300px; width: 33%; min-width: 200px; max-width: 1800px; border: 1px solid white; float: left"></div>
		</div>
		<div>
			<div id="container6" style="height: 300px; width: 33%; min-width: 200px; max-width: 1800px; border: 1px solid white; float: left"></div>
			<div id="container7" style="height: 300px; width: 33%; min-width: 200px; max-width: 1800px; border: 1px solid white; float: left"></div>
			<div id="container8" style="height: 300px; width: 33%; min-width: 200px; max-width: 1800px; border: 1px solid white; float: left"></div>
		</div>
	</div>
</body>
</html>